import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actions } from '../action/action';
import { Button, Form, Input, InputNumber, Icon, Select, Spin, Modal } from 'antd';


const FormItem = Form.Item;
const Option = Select.Option;


// 新增VIP
class NewContact extends Component {
    componentWillMount() {
        this.props.searchMethod('size', '');
        this.props.searchMethod('user', '');
    }
    checkMobile(rule, value, callback) {
        if (value > 0 && value.length === 11) {
            callback();
            return;
        }
        callback('请输入正确的手机号码!');
    }
    fetchUser(keyword) {
        if (keyword.length)
            this.props.searchMethod('user', keyword);
        else return;
    }
    handleSubmit(e) {
        debugger
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, contact) => {
            if (!err) {
                contact.sizeName = contact.sizeName.join('/');
                this.props.createNewContact(contact);
            }
        });
    }
    render() {
        const { newContact, triggerNewContact, createNewContact, searchMethod } = this.props;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
        };

        return (
            <Modal title="快速录入VIP" visible={newContact.isAddContact} onCancel={triggerNewContact} footer={[
                <Button key="back" size="large" onClick={triggerNewContact}  >
                    关闭
                </Button>,
                <Button key="submit" type="primary" size="large" onClick={this.handleSubmit.bind(this)} loading={newContact.loading}>
                    确认
                </Button>,
            ]} >
                <Form>
                    <FormItem
                        {...formItemLayout}
                        label="顾客姓名"
                        hasFeedback
                    >
                        {
                            getFieldDecorator('customerName', {
                                rules: [{ required: true, message: '请输入姓名!' }],
                            })(<Input />)
                        }
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="手机号码"
                        hasFeedback
                    >
                        {
                            getFieldDecorator('mobile', {
                                rules: [{ required: true, validator: this.checkMobile.bind(this) }],
                            })(<Input />)
                        }
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="订单金额"
                    >
                        {
                            getFieldDecorator('totalAmount', {
                                rules: [{ required: true, message: '请输入订单金额!' }],
                            })(<InputNumber min={0} style={{ width: '100%' }} />)
                        }
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="数量"
                    >
                        {
                            getFieldDecorator('qty', {
                                rules: [{ required: true, message: '请输入数量!' }],
                            })(<InputNumber min={1} step={1} style={{ width: '100%' }} />)
                        }
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="尺码"
                    >
                        {
                            getFieldDecorator('sizeName', {
                                rules: [{ type: 'array', required: true, message: '请选择顾客尺码' }],
                            })(
                                <Select
                                    mode="multiple"
                                    style={{ width: '100%' }}

                                >
                                    {
                                        newContact.sizeList && newContact.sizeList.map(item => <Option key={item.sizeName}>{item.sizeName}</Option>)
                                    }
                                </Select>
                                )
                        }
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="购买力"
                        hasFeedback
                    >
                        {
                            getFieldDecorator('spendLevel', {
                                rules: [{ required: true, message: '请输入顾客购买力!' }],
                            })(<Input />)
                        }
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="风格"
                        hasFeedback
                    >
                        {
                            getFieldDecorator('styleName', {
                                rules: [{ required: true, message: '请输入顾客风格!' }],
                            })(<Input />)
                        }
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="录入人"
                    >
                        {
                            getFieldDecorator('register', {
                                rules: [{ required: true, message: '请选择录入人!' }],
                            })(<Select
                                showSearch
                                style={{ width: '100%' }}
                                notFoundContent={newContact.fetching ? <Spin size="small" /> : null}
                                filterOption={false}
                                onSearch={this.fetchUser.bind(this)}
                            >
                                {
                                    newContact.clerkList && newContact.clerkList.map(d => <Option key={d.employeId} value={d.employeName}>{d.employeName}</Option>)
                                }

                            </Select>)
                        }
                    </FormItem>

                </Form>
            </Modal>
        );
    }
}
const WrapperNewContact = Form.create({})(NewContact);


const _NewContact = connect(
    state => {
        return {
            newContact: state.newContact
        }
    },
    dispatch => {
        return {
            createNewContact: (contact) => {
                actions.createNewContact(dispatch, contact, (data) => {
                    if (data.success) {
                        message.success(data.message);
                    } else {
                        message.error(data.message);
                    }
                })

            },
            searchMethod: (type, keyword) => {
                actions.searchMethod(dispatch, type, keyword);
            }
        }
    }
)(WrapperNewContact);

export default _NewContact;